<template>
  <div class="system-add-role-container">
    <el-dialog title="详情" v-model="isShowDialog" width="769px" center>
      <el-row :gutter="20" class="rowgutter">
        <el-col :span="8"><p style="text-align: right">用户名：</p></el-col>
        <el-col :span="12"><span>{{ }}</span></el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {ref,defineExpose} from 'vue';
import {getDetailRow} from "/@/api/jd";

const isShowDialog = ref(false);

const openDialog = async (row: any) => {
  isShowDialog.value = true;
  const param = {id: row.id}
  const res = await getDetailRow(param)
  console.log(res)
};

defineExpose(() => {
  // return {
  openDialog
  // }
})
</script>

<style lang="scss" scoped>
.demo-ruleForm {
  /*border: 1px solid rgb(238, 240, 245);*/

  ::v-deep .el-form-item {
    height: 23px !important;
    border-bottom: 1px solid rgb(238, 240, 245);
  }

  ::v-deep .el-form-item__content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  ::v-deep * {
    padding: 0 !important;
    margin: 0 !important;
  }

  ::v-deep .el-form-item__content {
    height: 23px !important;
    line-height: 23px !important;
    text-align: left !important;
    /*border-left: 1px solid rgb(238, 240, 245);*/
    padding: 0 10px !important;
  }

  ::v-deep .el-form-item__label {
    height: 23px !important;
    line-height: 23px !important;
    text-align: right !important;
    padding: 0 10px !important;
  }
}
</style>
<style scoped lang="scss">
.system-add-role-container {
  .menu-data-tree {
    border: var(--el-input-border, var(--el-border-base));
    border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
    padding: 5px;
  }
}

.rowgutter {
  margin: 0 auto 10px;
}
</style>
